<template>
	<view>
		<view class="u-page">
			<u-navbar :is-back="false">
				<u-search class="f1 px6" placeholder="输入商品名称" v-model:modelValue="querys.name" confirm-type="search" @search="e=>navto('item/index', {name:e})" :show-action="false" />
			</u-navbar>
			<view class="pf f ht">
				<scroll-view scroll-with-animation class="w20 ht">
					<view v-for="(item, i) in list" :key="i" @click="current=i" class="py6 tac" :class="{on:current==i}">
						{{item.name}}
					</view>
				</scroll-view>
				<swiper class="f1 ht" :activeKey="current" :vertical="true" @change="e=>current=e.detail.current">
					<swiper-item v-for="(swiper, j) in list" :key="j">
						<scroll-view :scroll-y="true" class="ht bgw p3" v-if="current>=j-1 && current<=j+1">
							<view class="fww fjs">
								<template v-for="(item, i) in swiper.children" :key="i">
									<view class="col-3 fjc fdc mt4" v-if="item.id>110300" @click.stop="navto('item/index', {cate_id:item.id})">
										<image :lazy-load="true" class="w12 h12 fade-in" :src="filter.image(item.image)" />
										<view class="fs24 fc-primary">{{item.name}}</view>
									</view>
								</template>
							</view>
							<view class="h28"></view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<Tabbar :activeKey="1" />
	</view>
</template>
<script lang="ts">
// import util from '@/utils/util'
import {page} from '@/mixins'
import Tabbar from './Tabbar'

export default {
	mixins: [page],
	components: {Tabbar},
	data() {
		return {
			list: [],
			querys: {name:''},
			current: 0,
			loadPath: 'cate'
		}
	}
}
</script>

<style lang="scss" scoped>
	.on {
		color: #000;
		background: #fff;
		border-left: 4px solid $u-primary;
	}
</style>
